<template>
	<view class="main">
		<u-search placeholder="找朋友" v-model="searchValue" :show-action="false" @search="onSearch"></u-search>
	
		<view v-for="item in allState.list" :key="item.userid" class="flex flex-ai-c list">
			<view class="head-img">
				<image :src="item.headimg || '../../static/img/headimg.jpg'"></image>
			</view>
			<view class="right flex flex-ai-c f1">
				<view>
					<view>{{item.username}}</view>
					<view>{{item.sign}}</view>
					<view></view>
				</view>
				<view class="gz" @click="onInterest(item)">{{item.text}}</view>
			</view>
		</view>
		<view style="height: 100%;" v-if="!allState.list.length">
			<u-empty text="数据为空" mode="list"></u-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import user from '@/api/user.js'
	import chat from '@/api/chat.js'
	let userinfo = uni.getStorageSync('userinfo')
	let searchValue = ref('')
	let allState = reactive({
		list: []
	})
	const onSearch =  () => {
		getList()
	}
	const onInterest = async (item: AnyObject) => {
		if(item.text == '关注'){
			const res = await chat.followAdd({
				userid: item.userid	,///被关注着id
				fanid: userinfo.userid
			})
			item.text = '已关注'
			console.log(res)
		}
		
	}
	const getList = async () =>{
		const res = await user.getUserList({
			username: searchValue.value,
			type: 3
		})
		res.data.map(v =>{
			v.text = '关注'
		})
		allState.list  = res.data
	}
	onLoad(()=>{
		getList()
	})
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.main{
		height: 100%;
		.list{
			position: relative;
			padding: 20rpx;
			border-bottom: 1px solid gainsboro;
		}
		.right{
			margin-left: 20rpx;
		}
		.gz{
			text-align: center;
			width: 100rpx;
			line-height: 50rpx;
			color: rgb(247,119,14);
			height: 50rpx;
			border: 1px solid rgb(247,119,14);
			border-radius: 30rpx;
			position: absolute;
			right: 20rpx;
		}
	}
</style>